0

I was trying to replace multiline string with another multiline string using javascript. How do I do that?

For example the pseudo code for this could be as shown below, where the string to search and set are runtime variables/arguments (not hardcoded as shown below), so we cannot create fixed regular expressions. Any idea?

The string to search for looks like,

<tr>

    <td colspan="3" class="footer">&nbsp;</td>

</tr></tbody></table>

and let the string to replace be,

<tr>

   <td colspan="3" class="footer">New Arrivals!!!</td>

</tr>

<tr>

<td colspan="3" class="footer">&nbsp;</td>

</tr></tbody></table>

Pseudo code,

var regExp = new RegExp(strMultiLineTextToSearch.trim(), "gm");
var matches = htmlContent.match(regExp);
alert(matches.length);
if(matches.length > 0){
    var newHtml= htmlContent.replace(regExp , strMultiLineTextToSet );
}

Using Firefox 22.0

Improve this question

3 Answers 3

Reset to default
2

also, the strings are prased from webpage using some string foo and innerHTML.

EEEK! Don't use HTML manipulation to add content to a table. That would be like adding a small detail to a big painting by having a painter describe the picture to you, then paint a new picture based on that description, except you change that little detail in the description.

Not just it's incredibly slow, but the painter is likely to not use the very same words you used when telling him to draw the picture the first time. You will be confused if he says "young woman" instead of "lady". You wanted the lady to hold something, but there's only a young woman. Instead, you should tell the painter to give the lady that something.

The same applies here: are you sure you use the exact same amount of whitespace in the string you're searching as is in the table? If there isn't, the string won't be found. Even if there is, how can you be sure the browser doesn't rearrange the attributes within a tag (IE loves to sort them alphabetically)? Add whitespace after the arguments? Some browser extension may add its own attributes or classes...

Instead, use DOM manipulation. That's the picture. HTML is its description.

If you add an ID to that row, it will be easy to find from javascript. Then create the new element and place it before that row.

var lastRow = document.getElementById("last-row")
var td = document.createElement("td")
td.className = "footer"
td.colspan = 3
var text = document.createTextNode("New arrivals!!!")
td.appendChild(text)
lastRow.parent.insertBefore(lastRow, td)

If the table is easy to find, you can access its last row via that table:

var table = document.getElementById("my-table")
var lastRow = table.rows[table.rows.length - 1]
...

It seems you are using the table to layout your page. This is not a clean approach (the page is not semantically a table, lots of unneccessary elements; please note the distinction between <table> and display:table). Adding an empty spacing cell is almost certainly wrong. Use CSS margin-bottom or padding-bottom instead (unless you're making an HTML email - in which case, use CSS anyways, then convert to a mail-safe form using some freeware web service that exists for that purpose). CSS is not hard. Not using it is much harder.

Improve this answer
Sign up to request clarification or add additional context in comments.

6 Comments

A definite +1 on all points! I must confess I like using innerHTML sometimes, but for this table update (if the table is even a good idea at all) DOM manipulation is much better. It's even simpler with jQuery: $('<tr><td colspan="3" class="footer">New Arrivals!!!</td></tr>').insertBefore('#my-table tr:last'); but the straight DOM code is fine too. Either way it's a much more robust approach than the string manipulation.
@MichaelGeary I was wondering if to suggest jQuery, but the asker doesn't seem to be using it (otherwise we'd be seeing a different kind of bad code), and the non-jQuery solution is easy enough (now, adding something after some element...) to not warrant an extra library.
@MichaelGeary it wasn't me. I'm not annoyed. I do like jQuery. I just love learning how to do things without ;-) (but I can ditch IE8 in my personal projects, so...)
Cool, I will delete my "temporary note" comment then, since it was just a personal matter. (And then I'll delete this comment too after you've had a chance to see it, just to clean things up.)
@JanDvorak Cool, as you pointed out, the code snippet is part of a big picture. From the perspective of whole canvas, we are actually doing the DOM manipulation. Those strings comes through wire, telling us to manipulate the current painting, so what I do is take the current canvas, just after the onLoad event; then iterate through the childNodes, takes the innerHTMl of the nodes, compare the given description matches some where in the painting, if yes, modify the painting, assemble it back to the full canvas! Thats it. Hope you got the idea.
|
0

You can't have Strings spanning across multiple lines. If you want a String that contains newline characters you'll have to use escape sequences: \n. Also pay attention not to use double quotes in a string that is itself enclosed in double quotes - you need to escape those, too.

var foo = "I am a string that contains a \" double quote"

or

var foo = 'I am a string that contains a " double quote'

are legal while

var foo = "I am a string that contains a " double quote"

is not

Improve this answer

3 Comments

As I mentioned in the question, the strings are escaped correctly, the strings in my question are just place holders to showcase the nature of text. Will update the question.
also, the strings are prased from webpage using some string foo and innerHTML.
Basically, you want to replace the tr with &nbsp; in it by two rows: one with "New Arrivals" and the original itself. Right?
0

The problem I see here is that you're using double quotes where they are not allowed and lack of \n in the end of each line in your strings:

var strMultiLineTextToSearch =
"<tr>

    <td colspan="3" class="footer">&nbsp;</td>

</tr></tbody></table>";

should be 

var strMultiLineTextToSearch =
"<tr>

    <td colspan='3' class='footer'>&nbsp;</td>

</tr></tbody></table>";
Improve this answer

1 Comment

As I mentioned in the question, the html fragments are parsed from webpage, not hard coded. The variables I defined in the pseudo code were just place holders to show how they look like. Also, modifying the html fragments is not an option anyway.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.