Question

我有一个textarea，其内容如图所示

<textarea id="textfield"><img src="smile.png alt=":)"/>Hi</textarea>

我使用下面的js代码来过滤textarea img alt 值和 Hi 的内容，如图所示得到这样的结果 :)嗨但我希望将它安排到此订单嗨：），使用以下代码段

$scope.performaction = function () {
//get the value of the textarea
        var textarea = angular.element('#textfield').val();
        textareaValue = textarea;
        var altValues = [];
    while (true) {
        var altValueMatch = textareaValue.match(/\<img.*?alt=(\"|\')(.*?)\1.*?\>/),
            altValue = (Array.isArray(altValueMatch) && typeof altValueMatch[2] === "string")
                ? altValueMatch[2]
                : null;

        if (altValue !== null) {
            altValues.push(altValue);
        } else {
            break;
        }
        textareaValue = textareaValue.replace(/\<img.*?\>/, "").trim();
    }
var concatenated = [altValues, textareaValue].join(" ");
                concatenated.replace(/&nbsp;|,/g,'');
    //assign the value to the second textarea of ng-model="content"
                $scope.content = concatenated;

            };

在使用angularjs过滤后，如何使用上面的js代码将textarea值重新排列为类似 Hi：）的值。换句话说，让alt值最后。

Answer 1

在你的js中，改变连接内容的顺序，先包括textareavalue然后再包含替代值

var concatenated = [textareaValue, altValues].join(" ");
concatenated.replace(/&nbsp;|,/g,'');
//assign the value to the second textarea of ng-model="content"
$scope.content = concatenated;

Answer 2

您可以始终$watch alt这样的指令中的app.directive('altChange',function(){ return { restrict: 'a', link: function(scope,elem,attr){ scope.$watch(function(){return elem.val()},function(value){ var textarea = value; textareaValue = textarea; var altValues = []; while (true) { var altValueMatch = textareaValue.match(/\<img.*?alt=(\"|\')(.*?)\1.*?\>/), altValue = (Array.isArray(altValueMatch) && typeof altValueMatch[2] === "string") ? altValueMatch[2] : null; if (altValue !== null) { altValues.push(altValue); } else { break; } textareaValue = textareaValue.replace(/\<img.*?\>/, "").trim(); } var concatenated = [altValues, textareaValue].join(" "); concatenated.replace(/ |,/g,''); //assign the value to the second textarea of ng-model="content" $scope.content = concatenated; }) } } })属性

JS：

<textarea alt-change id="textfield"><img src="smile.png alt=":)"/>Hi</textarea>

HTML：

element.val()

<强>解释

通过创建一个指令来监听digest现在每次更改值时，角度$watch系统将调用传递给scope函数的函数

另一点是，默认的scope:false属性为$scope.content，因此$scope会冒充你的控制器public class ErrorSpan extends DynamicDrawableSpan { private int width; int lineWidth; int waveSize; int color; public ErrorSpan(Resources resources) { this(resources, Color.RED, 1, 3); } public ErrorSpan(Resources resources, int color, int lineWidth, int waveSize) { super(DynamicDrawableSpan.ALIGN_BASELINE); // Get the screen's density scale final float scale = resources.getDisplayMetrics().density; // Convert the dps to pixels, based on density scale this.lineWidth = (int) (lineWidth * scale + 0.5f); this.waveSize = (int) (waveSize * scale + 0.5f); this.color = color; } @Override public Drawable getDrawable() { return null; } @Override public int getSize(Paint paint, CharSequence text, int start, int end, Paint.FontMetricsInt fm) { width = (int) paint.measureText(text, start, end); return width; } @Override public void draw(Canvas canvas, CharSequence text, int start, int end, float x, int top, int y, int bottom, Paint paint) { Paint p = new Paint(paint); p.setColor(color); p.setStrokeWidth(lineWidth); int doubleWaveSize = waveSize * 2; for (int i = (int)x; i < x + width; i += doubleWaveSize) { canvas.drawLine(i, bottom, i + waveSize, bottom - waveSize, p); canvas.drawLine(i + waveSize, bottom - waveSize, i + doubleWaveSize, bottom, p); } canvas.drawText(text.subSequence(start, end).toString(), x, y, paint); } }

使用angularjs重新排列文本区域中的文本顺序

2 个答案: