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标记。

喜欢这样：

＆＃13;

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

＆＃13;

对此：

＆＃13;

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

＆＃13;

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

＆＃13;

这样做是否可行？

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或更多字母的时刻。如果您需要其他字符，则需要调整正则表达式。

Here is a working example

Answer 2

一个简单的解决方法是放置＆＃39;！＆＃39;在单词的开头，说＆＃39;＃＆＃39;在末尾。然后插入以下代码（不自己测试，但应该工作）：

return $(this).text().replace("!", "<span class='mark'>"); 
return $(this).text().replace("#", "</span>");

你可以把它们合二为一，但这是我能想到的最简单的解决方案。告诉我它是怎么回事。

如何在代码标记中的某些文本周围添加span标记？

2 个答案: