代码之家 › 专栏 › 技术社区 › Saravana

将JS替换函数合并到一行代码中

jquery html javascript

Saravana · 技术社区 · 1 年前

我想把三个替换Regex代码连接成一个。在以下示例中,我删除了 DIV, I, IMG 标题中的标记。这是意料之中的行为。连接的唯一问题。

任何帮助我实现这一目标的人。

text = $('.text').attr('title')
//console.log(text)
bind = text.replace(/<(span|i)[^>]*>.*?<\/\1>/g, '').replace(/<img[^>]*>/g, '').replace(/<\/?div[^>]*>/g, '')
console.log(bind)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div title="Lorem Ipsum<div><img src='test.png'><i class='fa fa-check'></i></div>" class="text">Lorem Ipsum has been the industry's standard</div>

2 回复 | 直到 1 年前

spender 1 年前

使用RegExp解析HTML可能是个坏主意,并且会导致解决方案变得脆弱。

为什么不直接用解析 DOMParser 然后询问结果 document innerText ?

const attribString = "Lorem Ipsum<div><img src='test.png'><i class='fa fa-check'></i></div>";
const dp = new DOMParser();
const doc = dp.parseFromString(attribString, "text/html");
const text = doc.documentElement.innerText;
console.log(text);

KooiInc 1 年前

我想 DOMParser 有点过头了。使用临时虚拟div元素的解决方案怎么样?使用vanilla-js的代码段:

const elem = Object.assign(
  document.createElement(`div`), {
    innerHTML: document.querySelector(`div.text`).title
  }
);
console.log(elem.textContent);

<div 
  title="Lorem Ipsum<div><img src='test.png'><i class='fa fa-check'></i></div>" 
  class="text">
  Lorem Ipsum has been the industry's standard
</div>