テキストセレクタを作成して選択した単語をハイライトして削除する方法

私は単語セレクタを作成し、そこから結果を得る必要があります。たとえば、ある文字列のようなテキストがありますが、これはおそらく配列の空白を解析することができますが、単語をクリックした後に強調表示されるテキストからいくつかの単語を選択する仕組みを作成する方法はありません。テキストからの単語が強調表示された情報を得ることができる。テキストセレクタを作成して選択した単語をハイライトして削除する方法

あなたがユーザーであり、ハイライトする単語を選択するためのテキスト付きのページを表示した後、ボタンをクリックすると、このテキストが強調表示されます。強調表示された単語を削除した後にこの変更を表示する必要はありませんが、システムバックエンドにとっては重要です。単語を1つずつ削除することはできませんが、いくつかの特定の単語を選択する必要があります。ボタンを押すと、システムはその単語がないテキストをさらに処理できます。さらに、選択した単語をもう一度タップ/クリックした後、単語を選択解除する必要があります。

任意の方法、フレームワーク（API）または私は長い間、検索時に逃したものはありますか？

出典

2017-02-27 Marek Bernád

あなたがこれを行うために、任意のエディタを使用することができます。私は 'ckeditor'と' quill'について知っています。いずれかから選択したテキストコンテンツを取得し、あなた自身の複数のドロップダウンを使って削除を確認したり、選択を解除したりしてください。 – C2486

私はあなたにアイデアを与えるかもしれない何かを見つけました：http://jsfiddle.net/Lad1dp18/1/ –

ありがとう、ニッキー、私はそれでいくつかの奇跡を作ろうとします。 –

最後に、私は人間がそれを理解できる方法を見つけました。いくつかは、テキスト、解析、削除できるすべての単語や特殊文字のスパンを作成し、jqueryのクリックのおかげでそれらを強調表示し、最後には以前に選択された単語のない文字列を持っている事実と複数の削除を感謝します。論理的なアプローチが間違っていると思われる場合は、私の実装のアイデアをより良くするためにコメントすることができます。

ソースコード、wordChooser.html：

// text I will obtained from database 
 
textToClear = "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the \"1500s\", when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem    Ipsum."; 
 

 
textAfterClear = "" 
 

 
parseTextToWords(); 
 

 
function parseTextToWords(){ 
 
\t // basic interpunct chars should be single elements to click 
 
\t textToClear = textToClear.replace(/\./g, ' .'); 
 
\t textToClear = textToClear.replace(/\?/g, ' ?'); 
 
\t textToClear = textToClear.replace(/\!/g, ' !'); 
 
\t textToClear = textToClear.replace(/\,/g, ' ,'); 
 
\t textToClear = textToClear.replace(/\"/g, ' " '); 
 
\t // removing multiple spaces for single 
 
\t textToClear = textToClear.replace(/ +(?=)/g,''); 
 
\t 
 
\t var words = textToClear.split(" "); 
 

 
\t // generate words with ids to change their future css 
 
\t for (var i = 0, l = words.length; i < l; i++) { 
 
\t \t var word = $('<span />').attr({'id':'word'+i }).html(" "+words[i]); 
 
\t \t word.css('color','black'); 
 
\t \t $('.clearText').append(word); 
 
\t \t 
 
\t \t $('#word'+i).click(function() { 
 
\t \t \t if($(this).css('color') == "rgb(0, 0, 0)"){ 
 
\t \t \t \t $(this).css('color','red'); 
 
\t \t \t }else{ 
 
\t \t \t \t $(this).css('color','black'); 
 
\t \t \t } \t \t 
 
\t \t }); 
 
\t } 
 
} 
 

 
function removeSelected(){ 
 
\t $('.clearText').find('*').each(function() { 
 
     \t if($(this).css('color') == "rgb(0, 0, 0)"){ 
 
\t \t \t textAfterClear += $(this).html(); 
 
\t \t } 
 
    }); 
 
\t $(".clearText").html(textAfterClear); 
 
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
 
<html xmlns="http://www.w3.org/1999/xhtml"> 
 
<head> 
 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 

 
<title>Word chooser</title> 
 
</head> 
 

 
<body> 
 

 
<div class="clearText" style="border: 1px solid darkorange;" > 
 
</div> 
 

 
<div align="center"><button onclick="removeSelected()" type="submit">Delete Choosed</button></div> 
 

 
</body> 
 

 
</html>

出典

2017-02-28 22:46:25

テキストセレクタを作成して選択した単語をハイライトして削除する方法

答えて

関連する問題