时间戳

首页 > 解决方案 > 替换不是特定标签子串的子串

javascript - 替换不是特定标签子串的子串

问题描述

我需要替换 HTML 中的关键词并在它们周围放置一个跨度，以便稍后捕获点击事件。

我得到了字符串格式的 HTML，我尝试的是使用正则表达式将特定字符串替换为由 span 包围的字符串。这一切都很好，但问题是它与链接和其他标签匹配。因此，如果关键字在其中匹配，它也会包围其中的一部分。

我用来替换关键字的代码：

textToBeChanged = textToBeChanged.replace(new RegExp(keyword, 'ig'), keywordWrappedInSpan)

有没有办法扩展它，以便如果它在链接或其他标签中它不会替换它？或者也许用 JQuery 某种方式？

标签： javascriptjqueryhtml

解决方案

为了达到预期的结果，请使用下面的通过关键字测试拆分字符串

  1. 按单词拆分字符串 - 'test'
  2. 检查字符 '' 和 ''
  3. 相应地用 word test 更新 span

工作代码示例 

var str = '<div> test <a> test </a> </div>'

console.log(str.split('test').map(v => {
  if(v.indexOf('<a>') === -1 && v.indexOf('</a>') === -1){
    v = v + '<span>test</span>'
  }else{
    if(v.indexOf('<a>') !== -1){
      v = v + 'test'
    }
  }
  return v
}).join(''))

codepen - https://codepen.io/nagasai/pen/rEvvGV?editors=1010

推荐阅读