javascript - HTML - 如何在.text()中用方法获取完整字符串?

我正在处理javascript和html ,当我点击td文本,我为什么没有得到完整字符串的值?

我试过使用inner Html并尝试设置值。


 <tr class="success">


 <td id="name" ><a style="cursor: pointer;">Ravi Sharma</a></td> 


 </tr>




$('#name a').click(function() {


var name = $(this).text();


 var html = '<input type="text" name="memberlist" value='+ name +'/> ';



});







Expecting:



<input type="text" name="memberlist" value="Ravi Sharma" >



Actual:



<input type="text" name="memberlist" value="Ravi" sharma>




时间:

通过添加引号来解决问题,例如。


var html = '<input type="text" name="memberlist" value="'+ name +'"/> ';



如果nameRavi Sharma,这会工作得很好。 但是如果构造一组HTML,并且尝试会结果字符串放入元素的innerHTML中,则如果变量name双引号,


name = 'Ravi O"Brien'



document.body.innerHTML = '<input type="text" name="memberlist" value="'+ name +'"/> '



这将扩大到


value="Ravi O"Brien"



你的输入框将只包含"Ravi O"

确定你可以使用反引号和插值来解决这个问题,或者你甚至可以尝试用反斜杠转义双引号字符。这样做容易出错,innerHTML仍然存在问题,并且存在很大的安全问题,最好自己创建HTML元素,你使用jQuery,因此创建输入元素的正确方法是:


$("<input/>", {


 type: 'text',


 value: name,


 name: 'memberList',


})



有一些方法可以安全地使用innerHTML,但是,恕我直言,应该避免使用它。

HTML元素属性需要在它值周围加上引号,当你进行连接时,单引号会被插值。所以它假定第一个单词是唯一的值。

替代: var html = '<input type="text" name="memberlist" value='+ name +'/> ';

尝试以下方法: var html = '<input type="text" name="memberlist" value="'+ name +'"/> ';


var text = document.getElementById("aName").innerHTML;


var output = '<p>The name below is the result of the event, not the original state !</p>';


document.getElementById("aName").addEventListener("click", function() {


 document.body.innerHTML = output + text;


});

<tr class="success">


 <td id="name" ><a id="aName" style="cursor: pointer;">Ravi Sharma</a></td> 


 </tr>

另外,要实现所需的内容,需要对标记inside应用相同的逻辑,然后调用innerHTML事件的var名称:


var text = document.getElementById("aName").innerHTML;


var input_txt = '<input type="text" name="memberlist" value="'+ text +'"/> ';


document.getElementById("aName").addEventListener("click", function() {


 document.body.innerHTML = input_txt;


});

<tr class="success">


 <td id="name" ><a id="aName" style="cursor: pointer;">Ravi Sharma</a></td> 


 </tr>
...