使用多行字符串替换Javascript多行字符串

Question

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

Answer 1

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.

Answer 2

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

Answer 3

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