javascriptを使用して、Webページの選択した部分のHTMLまたはその属性を変更できますか?
たとえば、ランダムなWebページがあります:(その一部が表示されます)
HTMLとして
...<p>Sample paragraph</p>..
ここですでに回答済みの選択したテキストのHTMLを取得することができます。
しかし、選択したテキストのhtmlを変更することはできますか?同様に、段落タグにクラスまたはID属性を追加します。
javascriptを使用して、Webページの選択した部分のHTMLまたはその属性を変更できますか?
たとえば、ランダムなWebページがあります:(その一部が表示されます)
HTMLとして
...<p>Sample paragraph</p>..
ここですでに回答済みの選択したテキストのHTMLを取得することができます。
しかし、選択したテキストのhtmlを変更することはできますか?同様に、段落タグにクラスまたはID属性を追加します。
jQuery wrapselectionプラグインは、探しているもののように聞こえますhttp://archive.plugins.jquery.com/project/wrapSelection。あなたが求めていることは直接不可能ですが、プラグインは100%信頼できないかもしれない周囲のテキストの周りに余分なノードを追加することによって機能します(特にIE6-8では)
これはプラグインなしの実例です。
function getSel() {
var sel = null;
if (
typeof document.selection != "undefined" && document.selection
&& document.selection.type == "Text") {
sel = document.selection;
} else if (
window.getSelection && window.getSelection().rangeCount > 0) {
sel = window.getSelection();
}
return sel;
}
var getSelectionStart = (function () {
function createRangeFromSel(sel) {
var rng = null;
if (sel.createRange) {
rng = sel.createRange();
} else if (sel.getRangeAt) {
rng = sel.getRangeAt(0);
if (rng.toString() == "") rng = null;
}
return rng;
}
return function (el) {
var sel = getSel(),
rng, r2, i = -1;
if (sel) {
rng = createRangeFromSel(sel);
if (rng) {
if (rng.parentElement) {
if (rng.parentElement() == el) {
r2 = document.body.createTextRange();
r2.moveToElementText(el);
r2.collapse(true);
r2.setEndPoint("EndToStart", rng);
i = r2.text.length;
}
} else {
if ( rng.startContainer && rng.endContainer
&& rng.startContainer == rng.endContainer
&& rng.startContainer == rng.commonAncestorContainer
&& rng.commonAncestorContainer.parentNode == el) {
//make sure your DIV does not have any inner element,
//otherwise more code is required in order to filter
//text nodes and count chars
i = rng.startOffset;
}
}
}
}
return i;
};
})();
$("#content").on('mousedown', function () {
$("#content").html(content)
});
var content = $("#content").html();
$("#content").on('mouseup', function () {
var start = getSelectionStart(this);
var len = getSel().toString().length;
$(this).html(
content.substr(0, start) +
'<span style=\"background-color: yellow;\">' +
content.substr(start, len) +
'</span>' +
content.substr(Number(start) + Number(len), content.toString().length));
});
参照: http: //bytes.com/topic/javascript/answers/153164-return-selectionstart-div