jquery - 如何在代码标签中的某些文本周围放置一个 span 标签？

Question

您好，感谢您花时间帮助我。

这是我的页面设置:

<code class="form-control" contenteditable="true" style="height: 100%; min-height: 100px"></code>
<script src="~/Scripts/jquery-2.1.4.min.js"></script>
<script src="~/Scripts/HashTagList.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        HastTagLocation('form-control');

    });

function HastTagLocation(Controll) {
    var controller = $('.' + Controll);
    controller.keyup(function () {

    })
}
</script>

每次我写一个!我想将它和以下文本放入 div/span 标记中。

像这样:

<code>
Hello !how are you !today
</code>

对此:

span.mark {
  background-color: #808080;
}

<code>
    Hello <span class="mark">!how</span> are you <span class="mark">!today</span>
    </code>

有没有办法做到这一点？

Answer 1

您可以使用正则表达式替换函数来执行此操作...

// Get the code element.
var e = $('code');
// Get the text content.
var text = e.text();
// Replace the matches and wrap them with span tag.
var text = text.replace(/(\![a-zA-Z]*)/g, '<span class="mark">$1</span>');
// Set the html of the original element.
e.html(text);

您需要查看正则表达式并确定它是否适合您。它适用于 ! 后跟 0 个或更多 letters 的时刻。如果您需要其他字符，则需要调整正则表达式。

Here is a working example