CODEWITHSUNDEEP
javascriptstring
Tim
Tim

Reputation: 35

Javascript remove an html line a certain word is on

How can I use javascript to remove a line in a string that has a certain word on it?

word1
word2
word3

After I run the javascript code, I want it to look like this:

word1
word3

I know I can use str.replace("word2",'') to make it look like this:

word1

word3

but I can't seem to get rid of the line the word was on.

Thanks!

Upvotes: 1

Views: 2237

Answers (6)

Satyapriya Mishra
Satyapriya Mishra

Reputation: 130

One way probably is to split() the words in line breaks and then using looping you can further break each word. Search for the specific word using regex ,replace it and then join subsequently.

Upvotes: 0

Dipali Vasani
Dipali Vasani

Reputation: 2536

if words are wrapped using <p> use following 

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

else if they are wrapped with <div> you can use following

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

you can have any tag you want like span, label, etc just you need to replace it in code. you will need to use jquery to run that.

DEMO

Upvotes: 0

user6057915
user6057915

Reputation:

you could try to remove the line breaks using regex:

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

to replace both bind the two replace functions like: 

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

Upvotes: 2

blex
blex

Reputation: 25634

First, when used with a string as the first parameter, the replace method will only replace the first occurrence of the string. Regex can handle multiple ones. But if you want to remove lines containing the word (with other words around them), using replace might not be the way to go.

Instead, you can split your lines, then split the words in those lines, and look for the word:

// 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>

Upvotes: 1

Scott Marcus
Scott Marcus

Reputation: 65806

You will need each line of text to be in its own container element (like a <div> and wrap each of those elements in another container element (like another <div>.

This is necessary because a "line" on one viewport may not be the same thing as a "line" on another. This way, each bit of text is always contained. Additionally, if you want to remove the entire line that a word or phrase is on, you can't just replace that word or phrase with string.replace, because the rest of the line's text will still be there.

Then, when you determine which <div> needs to be removed, you remove the div.

Here's an example:

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">

Upvotes: 0

Sraw
Sraw

Reputation: 20214

Search the html text, and find what makes the line break. Maybe ">br<"(I need to write in this form)? Or something else. Replace it

Upvotes: -1

Related Questions