Javascript删除某个单词所在的html行

Javascript remove an html line a certain word is on

本文关键字：html 单词所 删除 Javascript      更新时间：2023-09-26

如何使用javascript删除字符串中带有某个单词的行？

word1
word2
word3

运行 javascript 代码后，我希望它看起来像这样：

word1
word3

我知道我可以使用str.replace("word2",'')使它看起来像这样：

word1
word3

但我似乎无法摆脱这个词所在的那行。

谢谢！

您可以尝试使用正则表达式删除换行符：

    str.replace(/^('r'n)|('n)/,'');

要替换两者，请绑定两个替换函数，例如： 

   str.replace("word2",'').replace(/^('r'n)|('n)/,'');

首先，当与字符串一起使用作为第一个参数时，replace 方法将仅替换字符串的第一次出现。正则表达式可以处理多个。但是，如果要删除包含单词的行（周围还有其他单词），则使用替换可能不是要走的路。

相反，您可以拆分行，然后

拆分这些行中的单词，然后查找单词：

// when you click on the button, do the filter
document.getElementById('filter').addEventListener('click', function(){
  var word = document.getElementById('word'),
      content = document.getElementById('content');
  
  content.value = filter_lines(content.value, word.value);
}, false);
function filter_lines(content, word)
{
  // Split the lines
  var lines = content.split(''n');
  
  // In each line
  for(var i=0; i<lines.length; i++)
  {
    // Split the words
    var words_on_line = lines[i].split(' ');
    // For each word
    for(var j=0; j<words_on_line.length; j++)
    {
      // If it is the one we are looking for
      if(words_on_line[j].toLowerCase() == word.toLowerCase())
      {
        // Remove the line
        lines.splice(i, 1);
        i--;
        // Stop working on this line
        break;
      }
    }
  }
  // Join the lines back and return them
  return lines.join(''n');
}
#content{
  display: block;
  width: 90%;
  height: 6em;
}
<p>List of lines</p>
<textarea id="content">
word1 this line will stay
blaword2 this one too because the word is inside another one
word2 this one will be removed
But not this one
</textarea>
<p>
  Remove lines containing this word:
  <input id="word" type="text" value="word2">
  <button id="filter">Filter lines</button>
</p>

您需要

将每行文本都放在其自己的容器元素中（如<div>并将每个元素包装在另一个容器元素中（如另一个<div>）。

这是必要的，因为一个视口上的"线"可能与另一个视口上的"线"不同。这样，始终包含每个文本位。此外，如果要删除单词或短语所在的整行，则不能仅将该单词或短语替换为string.replace，因为该行的其余文本仍然存在。

然后，当您确定需要删除哪个<div>时，您将删除div 。

下面是一个示例：

var parent = null, child1 = null, child2 = null, child3 = null, child4 = null, btn = null;
window.addEventListener("DOMContentLoaded", function(){
    parent =   document.getElementById("parent");
    c1 =   document.getElementById("child1");
    c2 =   document.getElementById("child2");
    c3 =   document.getElementById("child3");
    c4 =   document.getElementById("child4");
    b  =   document.getElementById("btn");
  
    b.addEventListener("click", function(){ 
          // You need to add your logic for determining which
          // child element needs to be removed here. I'm just
          // showing the actual code to remove the element.       
          parent.removeChild(c3);    
    });      
});
<div id="parent">
  <div id="child1">Word 1</div>
  <div id="child2">Word 2</div>
  <div id="child3">Word 3</div>
  <div id="child4">Word 4</div>
</div>
<input type="button" id="btn" value="Click to Remove">

如果使用以下

<p>

单词换行 
$('p:contains("word2")').remove();

否则，如果它们用<div>包裹，您可以使用以下内容

$('div:contains("word2")').remove();

你可以拥有任何你想要的标签，如span，label等，只需要在代码中替换它。 你将需要使用jQuery来运行它。

演示

一种方法可能是将（）单词拆分为换行符，然后使用循环可以进一步断开每个单词。使用正则表达式搜索特定单词，替换它，然后随后加入。

搜索 html 文本，并找到导致换行符的内容。也许">br<"（我需要以这种形式写）？或者别的什么。替换它

相关文章：