javascript - 转换 span 元素中 textNode 的子字符串

Question

我有这个问题:

对于一些 textNode，我需要转换 span 元素中的一些子字符串。是否有任何 jquery 函数来处理这个？还是 JavaScript 方法？

<p>---------------------Source---------------------</p>
<div id="source">
  abc def ghi google ljm microsoft alpha beta
</div>

<p>----------------------Goal----------------------</p>
<div id="goal">
  abc def ghi <span>google</span> ljm <span>microsoft</span> <span>alpha</span> <span>beta</span>
</div>

Answer 1

(function( $ ) {
  $.fn.spanIt = function(_array) {
      var html=this.html();
      for(var key in _array){
      	 html=html.replace(new RegExp(_array[key],"g"), '<span>'+_array[key]+'</span>');
      }
      this.html(html);
      return this;
  };
})( jQuery );


$('#source').spanIt(['google','microsoft', 'alpha', 'beta']);
console.log($('#source').html());

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>


<p>---------------------Source---------------------</p>
<div id="source">
  abc def ghi google ljm microsoft alpha beta
</div>

<p>----------------------Goal----------------------</p>
<div id="goal">
  abc def ghi <span>google</span> ljm <span>microsoft</span> <span>alpha</span> <span>beta</span>
</div>