Question

我想动态检查一个段落是否有单词列表，如果找到则将这些单词包装在span标签中。

示例：

<p class="para">
My house is red and my front door is blue.
</p>

我怎样才能检查“house”，“red”，“door”和“blue”这两个词，以及我可能添加到段落中的任何其他词，然后将它们包裹在一个简单的span标签中然后可以用CSS设置样式吗？

我搜索并找到了单个单词的答案，但作为一个完整的新手，我不知道如何检查我可以添加的列表。

Answer 1

Javascript有很好的正则表达式 - 你可以使用它们。

Private Sub cmdOk_Click()
    'exit if txtcnsl has no value
    If Len(txtcnsl.Value) = 0 Then
        Msgbox "Please fill in blah blah blah"
        Exit Sub  
    End If 

    '...
    'rest of your code
    '...
End Sub

这会将您的所有字词放在一个匹配名称为ex var words = ['house', 'red', 'door', 'blue']; // create a regular expression matching any of these words, using 'g' flag to match all instances var regexp = new RegExp('(' + words.join('|') + ')', 'ig'); $('p.para').each(function(num, elem) { var text = $(elem).text(); // use string.replace with $& notation to indicate whatever was matched text = text.replace(regexp, '<span class="$&">$&</span>'); $(elem).html(text); });的范围内。你可以通过替换第一个＆＃39; $＆amp;＆＃39;来为每个人创建相同的课程。有一些预定义的类。

Answer 2

function wrapWithSpan(str){
    var outerDom = $('p.para');
    outerDom.html(outerDom.html().replace(RegExp(str,'ig'), '<span>' + str + '</span>'))
}

或者如果你有一个数组，你可以尝试这个

function wrapWithSpan(strArr){
    var outerDom = $('p.para');
    outerDom.html(outerDom.html().replace(RegExp(strArr.join('|'),'g'), 
    function(token){
        return '<span>' + token + '</span>';
    });
}

Answer 3

可能的解决方案。

＆＃13;

const words = ['house', 'red', 'door', 'blue'];
let elem = document.querySelector('.para');

elem.innerHTML = elem.textContent.split(' ').map(v => {
  return words.indexOf(v) > -1 ? `<span class='r'>${v}</span>` : v;
}).join(' ');

＆＃13;

.r {
  color: blue;
}

＆＃13;

<p class="para">
  My house is red and my front door is blue.
</p>

＆＃13;

Answer 4

我提供了一个不错的仅限javascript的演示，没有jQuery。

https://jsfiddle.net/66hujh1e/

(function() {
  var paragraph = document.getElementsByClassName('para')[0];
  var text = paragraph.innerHTML;

  var wordArr = text.split(' ');
  text = [];
  wordArr.forEach(function(el) {
  	if(el === 'house' || el === 'red')
    	el = '<span class="matched">' + el + '</span>';
    text.push(el);
  });
  console.log(text);
  text = text.join(' ');
  paragraph.innerHTML = text;
})()

.matched {
  background-color: red;
  font-weight: bold;
}

<p class="para">
My house is red and my front door is blue.
</p>

基本上，您只想获取文本，拆分并处理它，然后将其重新组合在一起，并将其作为节点文本分配回来。使用正则表达式等更优雅的方法来实现这一点，但基于低级理解，我认为这说明了逻辑更好一点。

从列表中查找单词并将其包装在一个范围内？

4 个答案: