Convert a HTml String to DOM and then DOM to formatted Text

问题

I have used an RtfToHtml Converter in order to print some text into my table cell. it converts successfully, then i want this converted text (geResult.NotesLong) to be formatted:

<td>
    <script>{ setCommentValue(@colIndex, @rowIndex, @totalColCount, '@geResult.NotesLong', '@geResult.Color');}</script>
</td>

this javascript function converts it into a DOM element

function setCommentValue(colIndex, rowIndex, assessmentLength, resultValue, color) {

var str2DOMElement = function (html) {
    var frame = document.createElement('iframe');
    frame.style.display = 'none';
    document.body.appendChild(frame);
    frame.contentDocument.open();
    frame.contentDocument.write(html);
    frame.contentDocument.close();
    var el = frame.contentDocument.body.firstChild;
    document.body.removeChild(frame);
    return el;
  }

 var el = str2DOMElement(resultValue);

 //...code to set elementPos...

 $(".test").get(elementPos).appendChild(el);

}

which displays in my table as follows

<DIV STYLE="text-align:Left;font-family:Segoe UI;font-style:normal;font-weight:normal;font-size:12;color:#000000;"><P STYLE="margin:0 0 0 0;"><SPAN><SPAN>Lee is an attentive listener who tunes into the task at hand  </SPAN></SPAN></P><P /></DIV>

However i want it to display as (with formatting defined in the above tags)

Lee is an attentive listener who tunes into the task at hand

How do i format this text so that it is formatted as per tags but only text is displayed in my table cell?

回答1:

Your code ends like this:

[...]</P><P /></DIV>

There's an error, it shoud be

[...]</P></P></DIV>

(second closing p tag wrong / position)

ADDITION: Actually, that second closing p tag is one too much - there's only one opening ptag in the code you posted - erase it.

回答2:

Finally i have found a way to extract plain text from inside (but it is still missing formats)

html page

<td>
    <script>{ setCommentValue(@colIndex, @rowIndex, @totalColCount, '@geResult.NotesLong', '@geResult.Color');}</script>
</td>

javascript

function setCommentValue(colIndex, rowIndex, assessmentLength, resultValue, color) {

String.prototype.replaceAll = function (search, replacement) {
    var target = this;
    return target.split(search).join(replacement);
};

//replace all text special characters
var replaced = resultValue.replaceAll("&amp;", "&").replaceAll("&gt;", ">").replaceAll("&lt;", "<").replaceAll("&quot;", "\"").replaceAll("&#039;", "\'");

var parser = new DOMParser();    
var doc = parser.parseFromString(replaced, "text/xml");       

....

$(".test").get(elementPos).innerHTML = doc.firstChild.textContent;

}

My text had special characters like > for > etc so i replaced them manually.

来源：https://stackoverflow.com/questions/43859034/convert-a-html-string-to-dom-and-then-dom-to-formatted-text

标签

html5

html-formatting

html-to-text