如何在输入中选择的文本周围包裹一个 html 标签？答案

【问题标题】：How to wrap a html tag around a text selected in an input?如何在输入中选择的文本周围包裹一个 html 标签？
【发布时间】：2015-03-28 13:35:41
【问题描述】：

问题是：我有一个输入文本类型元素，旁边还有一个按钮。

单击按钮后，输入中的选定文本必须用 html 元素包装。例如，当点击按钮时，选中的文字会被<span style='color:red'></span> !

有人有解决办法吗？

【问题讨论】：

你试过什么？
不是 100% 确定“用 html 元素包装”是什么意思。你能举个前后的例子吗？
对不起，我在问题中写了一个 html 标签，但没有显示。我现在编辑了，所以现在对问题的任何误解都可以消除了！
因为学习格式化代码。

标签： javascript jquery html forms input

【解决方案1】：

正如@RémyJ 所写，您可以使用jQuery select 事件来获取选择。试试这个：

var start, end;
$('#tf').select(function(e) {
    start = e.target.selectionStart;
    end = e.target.selectionEnd;
});

$('.wrap').click(function() {
    var val = $('#tf').val();
    var newVal = val.substr(0, start) + '!' + val.substr(start, (end-start)) + '!' + val.substr(end);
    $('#tf').val(newVal);
});

HTML：

<input type="text" id="tf"> 
<button type="button" class="wrap">wrap</button>

http://jsfiddle.net/qh95xyeq/

【讨论】：

【解决方案2】：

here 提出了类似的问题。您可以使用 JQuery 选择方法 (here) 或 JS 选择方法 (here)。然后用 HTML 包裹块替换选择。

【讨论】：