Angular：根據鍵盤輸入添加HTML標記到字符串

我有一個inputfield，並且我想在輸入字段中填寫輸入到屏幕。不過，我想掃描輸入文本，以打印某些文字粗體。Angular：根據鍵盤輸入添加HTML標記到字符串

因此，舉例來說，如果我打字：「你好你怎麼樣？」

我希望它的輸入字段下進行打印，但你好必須以粗體顯示： 你好，你好嗎？

Angular有沒有辦法實現這一目標？

2015-05-09 STEP

要做到這一點，你必須更換要大膽與<b>Word</b>的話，你做，在你的控制器：

$scope.$watch('textInput', function(){ 
    $scope.formattedText = $scope.textInput.replace(/(Hello|SomeWord|OtherWord)/ig, "<b>$1</b>"); 
});

而且在模板

<div ng-bind-html="formattedText"></div>

*我用用正則表達式替換$1是匹配的字

* ng-bind-html指令渲染一個小號HTML而不是作爲一個明文，它是由AngularJS一種安全的，它不會讓你把HTML直接在{{ formattedText }}

來源

2015-05-09 10:39:42 Sn0opr

謝謝，這個作品！我想知道是否有辦法讓正則表達式爲變量工作？我有一個可以檢查的字符串列表。我猜這是不可能的正則表達式，但你永遠不知道 – STEP

你可以將你的數組轉換爲一個字符串： 'var regex ='（'+ words.join（'|'）+'）'; '' 然後使用RegExp Javascript類： ''regexObject = new RegExp（regex，'ig'）;''然後在''.replace（regexObject，....）''函數中使用它'' *我沒有測試代碼tho – Sn0opr

謝謝，不知道RegExp！ – STEP

是的。您可以通過使用NgModelController（創建指令並使用require屬性來訪問此控制器）來實現它。

Here is a nice example它通過在所需控制器上實現$render方法來攔截輸入並在渲染之前對其進行更改。

呈現的文本輸入到一個大膽的另一個例子：http://jsbin.com/moxosorola/1/edit

注意，它不會改變ngModel本身的價值，但在方式呈現它（相同ngModel）要顯示它通過使用自定義指令（bold-render）。

來源

2015-05-09 10:34:35

Angular：根據鍵盤輸入添加HTML標記到字符串

回答

相關問題