替换p标签内的选定文本

Question

I am trying to replace the selected text in the p tag.I have handled the new line case but for some reason the selected text is still not replaced.This is the html code.

 <p id="1-pagedata">
(d) 3 sdsdsd random:  Subject to the classes of this random retxxt wee than   dfdf month day hello the tyuo dsds in twenty, the itol ghot qwerty ttqqo   
</p>

This is the javascript code.

 function SelectText() {
 var val = window.getSelection().toString();
 alert(val);
$('#' + "1-pagedata").html($('#' + "1-pagedata").text().replace(/\r?\n|\r/g,""));
$('#' + "1-pagedata").html($('#' + "1-pagedata").text().replace(/[^\x20-\x7E]/gmi, ""));
$('#' + "1-pagedata").html($('#' + "1-pagedata").text().replace(val,"textbefore" + val + "textAfter"));
}

$(function() {
   $('#hello').click(function() {
      SelectText();
   });
});

I have also created a jsfiddle of the code. https://jsfiddle.net/zeeshidar/w50rwasm/ Any ideas?

Answer 1

您可以简单地执行$("#1-pagedata").html('New text here');

Answer 2

Since your p doesn't content HTML but just plain text, your can use both html() or text() as getter and setter.

Also, thanks to jQuery Chaining you can do all your replacements in one statement. So, assuming your RegExp's and replacement values are correct, try:

var $p = $('#1-pagedata');
$p.text($p.text().replace(/\r?\n|\r/g,"").replace(/[^\x20-\x7E]/gmi, "").replace(val,"textbefore" + val + "textAfter"));