隐藏文本中的特定单词而不添加新标签

Question

我有这个代码：<div>Lorem ispum custom test</div>我只会隐藏而不删除“自定义”一词，而不添加任何新标签。我能怎么做？谢谢

Answer 1

您可以使用蒙版或剪辑路径。请注意，这不是一个可靠的解决方案，因为您需要根据字体属性和真实文本调整值：

.box {

  /* the text to hide start at 90px and end at 137px */

  -webkit-mask:linear-gradient(to right,#fff 90px,transparent 0 137px,#fff 0)

}

<div class="box">Lorem ispum custom test</div>

使用剪辑路径：

.box {

  /* the text to hide start at 90px and end at 137px */

  clip-path: polygon(0 0, 90px 0, 90px 100%, 137px 100%, 137px 0, 100% 0, 100% 100%, 0 100%);

}

<div class="box">Lorem ispum custom test</div>

Answer 2

不幸的是，你不能用 CSS 做到这一点，但你可以用 jQuery 替换这个词，如下所示：

jQuery(document).ready( function($){

  $('div').each(function(){

    var txt = $('div').text();

    var res = txt.replace('custom', '');

    $('div').text(res);

  });

});

重要提示：请记住，这将遍历您的所有 div，因为您的 div 没有 class 或 id 属性

Answer 3

这就是您稍后可以使用您的数组的方式。

var strings = [];

var str = document.getElementById("par");

if (str.textContent.includes("one")){

  var now = str.textContent.replace("one ", "");

  str.textContent = now;

  strings.push("one ")

};

console.log(strings)

<p id="par">this one is changed</p>