保存ユーザーのハイライト（文）

Question

オブジェクト私はこのようになりますテキストを、持っていると言う：

<span> Some sentence in which a fox jumps over some fence. </span> 
<span> Another sentence in which a dog jumps over some fox. </span> 
<span> Yet another one, I think you get the idea. </span> 

は、ユーザーが今、その後<span> 2項目以上にまたがり、テキストのビットを選択セイボタンを押して選択範囲をハイライトまたは太字にします。ユーザーには、次のようになります。

いくつかのフェンスでいくつかの文章がジャンプします。別の文 犬いくつかのキツネをジャンプします。さらに別の一つ、私はあなたが考えていると思う 。

私はこのようなものをどのように保存できるのだろうかと思っています。私は文章を吐き出す配列を反復することでこれらのスパンを作成しますが、ハイライトが2つの文にまたがっていることを覚えていますか一つののハイライト（私はもちろん何とか文の終わり2 &センテンス3の先頭が強調表示されていますが、ハイライトを別々に扱うでしょうか？

私はここでReactを使用しています。

Answer 1

これらの文字がどこに割り当てられているかにかかわらず、ユーザーが強調表示した文字を取得できます。ここで

は、プレーンJavaScriptでそれを行う方法についての例です：

function selected() { 
 
    if (window.getSelection) { 
 
    return window.getSelection().toString() 
 
    } else if (document.selection) { 
 
    return document.selection.createRange().text 
 
    } 
 
} 
 

 
function boldify (txt) { 
 
    var ls = txt.split(' ') 
 
    $.each($('span'), function (k, v) { 
 
    var currentText = $(v).text() 
 
    currentText = boldWord(ls, currentText) 
 
    $(v).html(currentText) 
 
    }); 
 
} 
 

 
function boldWord (ls, text) { 
 
    $.each(ls, function (k, v) { 
 
    console.log('v', v) 
 
    text = text.replace(v, '<b>' + v + '</b>') 
 
    }); 
 
    return text 
 
} 
 

 
function saveHighlight (txt) { 
 
    console.log('Save <' + txt + '>') 
 
} 
 
// this helper var will hold all the span 
 
// the user interacts with (you can pass this to get the el instead 
 
// of className 
 
var interactedSpan = [] 
 
// I said plain js, so sorry about the jQuery, just to be faster 
 
$('span').mouseup(function() { 
 
    interactedSpan.push(this.className) 
 
    var myText = selected() 
 
    saveHighlight(myText) 
 
    boldify(myText) 
 
    console.log('interactedSpan:', interactedSpan) 
 
}); 
 
$('span').mousedown(function() { 
 
    interactedSpan.push(this.className) 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<span class="a"> Some sentence in which a fox jumps over some fence. </span> 
 
<span class="b"> Another sentence in which a dog jumps over some fox. </span> 
 
<span class="c"> Yet another one, I think you get the idea. </span>

ないように注意してください私はinteractedSpanで答えを少し改善され、今も加えるとにかく、downvotedされた理由大胆なバージョン、彼は保存または太字のために尋ねた

Answer 2

あなたは有効なHTMLを持つことができるように2つの別々の太字のマーカーを持つことができますあなたが言及したように明白な解決策です。問題は、それぞれのハイライトの周りに境界線を持つようなこのソリューションでうまく動作しないという要件がある場合です。

<span> Some sentence in which a fox jumps over some fence. </span> 
 
<span> Another sentence in which a dog jumps <b>over some fox.</b> </span> 
 
<span><b>Yet another</b> one, I think you get the idea. </span>

それとも、任意の値を追加doesntのスパンで各文を維持する考えを避けることができます。代わりに、開始点と終了点のマーカーを配列内に保持し、それらを結合して単一の段落として表示します。開始マーカーと終了マーカーは<b>でなくてもかまいません。

const array = ["Some sentence in which a fox jumps over some fence.", 
 
"Another sentence in which a dog jumps <b>over some fox.", 
 
"Yet another one, </b>I think you get the idea."]; 
 

 
const p = document.createElement('p'); 
 
p.innerHTML = array.join('<br>'); 
 
document.body.append(p);